<template>
  <view class="container">
    <view class="header">
      <text class="title">H5 Page Integration Demo</text>
    </view>
    
    <view class="content">
      <view class="card">
        <view class="card-header">
          <text class="card-title">WebView Functionality</text>
        </view>
        <view class="card-body">
          <text class="description">
            This demo shows how to integrate an H5 page in a Taro Vue3 mini-program using the web-view component.
          </text>
          
          <view class="feature-list">
            <view class="feature-item">
              <nut-icon name="success" size="16" color="#07C160" />
              <text class="feature-text">Message sending from H5 to mini-program</text>
            </view>
            <view class="feature-item">
              <nut-icon name="success" size="16" color="#07C160" />
              <text class="feature-text">Page closing functionality</text>
            </view>
            <view class="feature-item">
              <nut-icon name="success" size="16" color="#07C160" />
              <text class="feature-text">Navigation to specific pages</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="button-group">
        <nut-button 
          type="primary" 
          block 
          @click="openH5Page"
          class="action-button"
        >
          Open H5 Page
        </nut-button>
        
        <nut-button 
          type="default" 
          block 
          @click="goBack"
          class="action-button"
        >
          Back to Previous Page
        </nut-button>
      </view>
      
      <view class="info-section">
        <view class="info-card">
          <view class="info-header">
            <nut-icon name="info" size="18" color="#1677FF" />
            <text class="info-title">How to Use</text>
          </view>
          <view class="info-content">
            <text class="info-text">
              1. Click "Open H5 Page" to view the H5 page in the web-view
            </text>
            <text class="info-text">
              2. On the H5 page, you can:
            </text>
            <text class="info-text info-indent">
              • Enter a message and click "Send" to communicate with the mini-program
            </text>
            <text class="info-text info-indent">
              • Click "Close Page" to return to this page
            </text>
            <text class="info-text info-indent">
              • Click "Jump Page" to navigate to another page in the mini-program
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { defineComponent } from 'vue'

// Open H5 page
const openH5Page = () => {
  Taro.navigateTo({
    url: '/pages/webview/h5-page'
  })
}

// Go back
const goBack = () => {
  Taro.navigateBack()
}

definePageConfig({
  navigationBarTitleText: 'H5 Integration Demo'
})
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 24px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.card-body {
  padding: 16px;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
  display: block;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.feature-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-button {
  height: 48px;
  font-size: 16px;
}

.info-section {
  margin-top: 8px;
}

.info-card {
  background: #f0f8ff;
  border-radius: 12px;
  padding: 16px;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.info-title {
  font-size: 16px;
  font-weight: 600;
  color: #1677FF;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-text {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  display: block;
}

.info-indent {
  margin-left: 16px;
}
</style>